<template>
  <Select v-bind="mainCfg" v-on="listener">
    <Option v-for="item in selectList" :value="item.dictValue" :key="item.dictValue">{{
      item.dictLabel
    }}</Option>
  </Select>
</template>

<script>
    import { getDictByKey } from "@/libs/dictStorage";

export default {
  mixins: [],
  components: {},
  props: {
    value: {

    },
    dictCode: {
        required: true,
    }
  },
  watch: {
    value: {
        handler() {
            this.showValue = this.value
        }
    },
    dictCode: {
        immediate: true,
        handler() {
            if(this.dictCode) {
                let arr = getDictByKey(this.dictCode)
                this.selectList = [...arr]
            }
        }
    },
  },
  computed: {
    mainCfg() {
        let cfg = Object.assign({}, this.$attrs, {
            value: this.showValue
        })
        return cfg
    },
    listener() {
        let action = Object.assign({}, this.$listeners, {'on-change': this.handleChange})
        return action
    }
  },
  data() {
    return {
        showValue: '',
        selectList: []
    };
  },
  methods: {
    handleChange(value) {
        this.showValue = value
        this.$emit('on-change', value)
    }
  },
  mounted() {},
  created() {},
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: 'value',
    event: 'on-change'
  },
};
</script>

<style lang="scss" scoped>

</style>
